<template>
    <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '700px'
            },
            serviceData: {
                type: Object,
            },
        },
        watch: {
            serviceData: {
                handler(newName, oldName) {
                    console.log(newName)
                    this.initChart()
                },
                deep: true,
            },
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                // this.chart = echarts.init(this.$el, 'macarons')
                echarts.init(this.$el).dispose();
                this.chart = echarts.init(this.$el)
                this.chart.setOption({
                    title: {
                        subtext: '',
                        x: 'right',
                        y: 'bottom'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} : {b}'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            restore: {
                                show: true
                            },
                            magicType: {
                                show: false,
                                type: ['force', 'chord']
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        x: 'left',
                        data: ['核心概念', '所属分类', '所属分类添加', '关联项']
                    },
                    series: [{
                        name: "",
                        type: 'graph',
                        layout: 'force',
                        draggable: true,
                        roam : true,
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 4],
                        focusNodeAdjacency: false, //连接线上的文字划过只显示对应关系
                        force: {
                            // edgeLength: 50,
                            // repulsion: 500,
                            // gravity: 0.1,
                            repulsion: 100,  //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                            edgeLength: 50,   //边的两个节点之间的距离，值越小则长度越长，这个距离也会受 repulsion影响。
                            gravity: 0.1,  //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                            friction: 0.6,
                            layoutAnimation : true  //初始化时转动动画
                        },
                        categories : [ {
                            name : '核心概念',
                            itemStyle: {
                                color: "rgba(255,127,80,0.93)"
                            }
                        }, {
                            name : '所属分类',
                            itemStyle: {
                                color: "rgba(135,206,250,0.93)"
                            }
                        }, {
                            name : '所属分类添加',
                            itemStyle: {
                                color: "rgba(234,124,204,0.93)"
                            }
                        }, {
                            name : '关联项',
                            itemStyle: {
                                color: "rgba(145,204,117,0.93)"
                            }
                        }],
                        label: {
                            normal: {
                                show: true,
                            }
                        },
                        data: this.serviceData.datas,
                        links: this.serviceData.links,
                    }]
                })

                let _that = this;
                this.chart.on('click', function(params) {
                    _that.$emit('echartsNodeClick', params);
                });
            }
        }
    }
</script>
